<template>
    <div class="wash">
        <div class="wash-content">
            <div class="wash-top">
                <i class="iconfont icon-yuanquan_xuanzhong"></i>
                <img src="../assets/pms_1545975724.92496169.jpg" alt="">
                <div class="wash-right">
                    <span>米家互联网洗烘一体机10kg</span>
                    <i class="iconfont icon-xiajiantou">白色</i>
                        <div class="article">
                            <span>&yen;1999</span>
                            <span>&yen;2299</span>
                            <span>-</span>
                            <span>1</span>
                            <span>+</span>
                        </div>
                </div>
            </div>
            <div class="wash-center">
                <ul>
                    <li><span class="swap">换购</span> 加599元得小米蓝牙音箱 &yen;599 <span class="save">（已省&yen;100）</span> 选购 ></li>
                    <li><span class="swap">换购</span> 加299元得小米真无线耳机 &yen;299 <span class="save">（已省&yen;100）</span> 选购 ></li>
                    <li><span class="swap">换购</span> 加139元得耳机Air2 SE &yen;139 <span class="save">（已省&yen;100）</span> 选购 ></li>
                </ul>
            </div>
            <div class="more">
                <p>更多<i class="iconfont icon-xiajiantou"></i></p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "washing"
}
</script>

<style scoped lang="scss">
    .wash{
        //width: 500px;
        height: 300px;
        //outline: 1px solid green;
        padding: 10px;
        position: relative;
            .wash-content{
                width: 480px;
                height: 300px;
                margin: auto;
                //outline: 1px solid blue;
                background-color: white;
                border-radius: 10px;
            }
            .wash-top{
                display: flex;
                justify-content: space-between;
                    .icon-yuanquan_xuanzhong{
                        font-size: 24px;
                        color: #FD5A36;
                        position: absolute;
                        top: 60px;
                        left: 23px;
                    }
                    img{
                        width: 100px;
                        height: 100px;
                        position: absolute;
                        top: 20px;
                        left: 53px;
                    }
                    .wash-right{
                        //outline: 1px solid gold;
                        position: absolute;
                        top: 32px;
                        right: 70px;
                        :nth-child(1){
                            font-weight: bolder;
                            font-size: 20px;
                        }
                        .icon-xiajiantou{
                            background-color: #eceaea;
                            border-radius: 5px;
                            position: absolute;
                            top: 29px;
                            right: 192px;
                        }
                        .article{
                            width: 249px;
                            position: absolute;
                            top: 63px;
                            right: 2px;
                            display: flex;
                            justify-content: space-between;
                            :nth-child(1){
                                color: #FD5A36;
                                //margin-right: 10px;
                            }
                            :nth-child(2){
                                color: #d5d0d0;
                                font-size: 14px;
                                text-decoration: line-through;
                            }
                            :nth-child(3){
                                color: #d5d0d0;
                                font-size: 15px;
                            }
                            :nth-child(4){

                            }
                        }
                    }
            }
            .wash-center{
                position: absolute;
                top: 136px;
                right: 30px;
                ul{
                    list-style: none;
                        li{
                            margin-top: 10px;
                            .swap{
                              font-weight: bolder;
                            }
                            .save{
                              color: #FD5A36;
                            }
                        }

                }
            }
            .more{
                position: absolute;
                right: 232px;
                bottom: 25px;
            }
    }
</style>